<template>
  <div class="footer" :style="postion_footer">
    <span>{{ footer_msg }}</span>
  </div>
</template>

<script>
import detector from "element-resize-detector";

import sys_config from "@/plugins/config";
export default {
  name: "ht-ms-footer",
  data() {
    return {
      footer_msg: sys_config.footer_msg,
      body_height: this.bo,
      screen_height: window.screen.availHeight
    };
  },
  computed: {
    postion_footer: {
      get() {
        if (this.body_height > this.screen_height) {
          return {
            position: "initial"
          };
        }
        return {
          position: "fixed",
          bottom: 0
        };
      }
    }
  },
  mounted() {
    var _this = this;
    var erd = new detector();
    erd.listenTo(document.getElementById("app"), function(el) {
      _this.$nextTick(() => {
        _this.body_height = document.body.clientHeight;
      });
    });
  }
};
</script>

<style lang="scss">
.footer {
  margin: 0;

  padding: 0;
  width: 100%;
  text-align: center;
  background: #ffffff;
  color: #2b2a2a;
  font-size: 12px;
  border-top: 1px solid #e6e6e6;
  height: 30px;
  line-height: 30px;
}
</style>
